<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>User Registration</title>
		
		<!-- CSS -->
		<link href="styles/formStyles/structure.css" rel="stylesheet">
		<link href="styles/formStyles/form.css" rel="stylesheet">
		<link href="styles/formStyles/theme.css" rel="stylesheet">
		<link rel="stylesheet" href="styles/common-css/jquery.ui.base.css" type="text/css" media="all" />
		<link rel="stylesheet" href="styles/common-css/jquery-ui-1.8.21.custom.css" type="text/css" media="all" />
		<link rel="stylesheet" href="styles/common-css/jquery.ui.theme.css" type="text/css" media="all" />	
		<style>
		div.inputnotes div {
  			padding: 3px;
  			padding-left: 4px;
 			 padding-top: 4px;
 			 margin-top: 2px;
			}

		div.inputnotes div.note {
  			color: #fff;
 			 background: #333;
		}

		div.inputnotes div.warning {
  		color: #fff;
  		background: #f03;
		}
		
		.error {
	color: #ff0000 !important;}
}
		</style>

		<!-- JavaScript -->
		<script src="js/common/jquery-1.7.2.min.js" type="text/javascript"></script>
		<script src="js/common/jquery.ui.datepicker.js" type="text/javascript"></script>
		<script src="js/common/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
		<script src="js/common/jquery.inputnotes-0.6.js" type="text/javascript"></script>
		<script src="js/common/jquery.maskedinput.js" type="text/javascript"></script>
		<script src="js/common/wufoo.js"></script>
		<c:url var="findStateCitiesURL" value="/cities.action" />
		<script>
			$(function() {
				$( "#dob" ).datepicker();
				$( "#anni" ).datepicker();
			});

			$(function(){
				   
				   $(".numeric").mask("(999) 999-9999");
				   $("#zip").mask("999999");
				   
				});
			

			$(document).ready(function(){
				  $("#fname").inputNotes( 
				    {
				      	numbersnote: {
				        pattern: /[0-9]/,
				        type: 'note',
				        text: 'Do not type numbers!' 
				      }
				    }
				  );

				  $("#lname").inputNotes( 
						    {
						      	numbersnotes: {
						        pattern: /[0-9]/,
						        type: 'note',
						        text: 'Do not type numbers!' 
						      }
						    }
						  );
					
				 
				  
				});

			
			function chkPass()
			{
				var pass = $("#pwd").val();
				var cpass = $("#cpwd").val();
				if(pass != cpass )
				{
					$("#pwd").val('');
					$("#cpwd").val('');
					alert("password does not match confirm password. Please confirm!");
				}
			}
			function showHideFields()
			{
				var val = $(".regAs:checked").val();
				var div = document.getElementById("companyDiv");
				if(val == "Individual"){ 
					div.style.display = 'none';
				}
				else if(val == "Company")
				{
					div.style.display = '';
				}
			}
			
			$(function(){
				showHideFields();
				$(".regAs").bind("change",showHideFields);
				
			});

			$(document).ready(function() { 
				$.getJSON('${findStateCitiesURL}', {
					stateId : $("#state").val(),
					ajax : 'true'
				}, function(data) {
					var html = '<option value="">--- Select ---</option>';
					var len = data.length;
					for ( var i = 0; i < len; i++) {
						html += '<option value="' + data[i].id + '">'
								+ data[i].name + '</option>';
					}
					html += '</option>';
	 
					$('#city').html(html);
				});
				$('#state').change(
					function() {
						$.getJSON('${findStateCitiesURL}', {
							stateId : $(this).val(),
							ajax : 'true'
						}, function(data) {
							var html = '<option value=""> </option>';
							var len = data.length;
							for ( var i = 0; i < len; i++) {
								html += '<option value="' + data[i].id + '">'
										+ data[i].name + '</option>';
							}
							html += '</option>';
			 
							$('#city').html(html);
						});
					});
			});
				
		</script>

		<!--[if lt IE 10]>
			<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>

<body id="public">
	<div id="container" class="ltr">

		
		<form:form id="form3" cssClass="wufoo leftLabel page" action="registerUser.action" method="post" commandName="user">
		
	
			<div class="info" >
				<h2>Register Here</h2>
				<div>Please fill it out to be register user!</div>
			</div>

		<ul>

		<li id="foli2" class="notranslate">
			<label class="desc" id="title2" for="Field2">
				<spring:message code="userReg.title" /> 
				<span id="req_2" class="req">*</span>
			</label>
			<div>
				<form:select id="Field2" path="title" cssClass="field select small" >
					<form:options items="${titles}"/>
				</form:select>
			</div>
		</li>
		
		<li class="notranslate">
			<label class="desc" for="fname">
				<spring:message code="userReg.fname" />
			</label>
			<div>
				<form:input id="fname" path="fname"  cssClass="field text medium" maxlength="12" />
			</div>
			
			<div><form:errors path="fname" cssClass="error" /></div>
		</li>
		
		<li class="notranslate">
			<label class="desc" for="lname">
				<spring:message code="userReg.lname" />
			</label>
			<div>
				<form:input id="lname" path="lname"  cssClass="field text medium" maxlength="12"/>
			</div>
			<div><form:errors path="lname" cssClass="error" /></div>
		</li>
		
		<li class="notranslate">
			<label class="desc" for="username">
				<spring:message code="userReg.username" />
			</label>
			<div>
				<form:input id="username" path="username"  cssClass="field text medium" maxlength="12"/>
			</div>
			<div><form:errors path="username" cssClass="error" /></div>
		</li>
		
		<li id="foli5" class="notranslate">
			<label class="desc" id="title5" for="Field5">
				<spring:message code="userReg.password" />
				<span id="req_5" class="req">*</span>
			</label>
			<div>
			<input id="pwd" name="password" type="password" class="field text medium" value="" maxlength="12"  onkeyup="validateRange(5, 'character');"/>
				<!--<form:input id="Field5" path="password" cssClass="field text medium" maxlength="12" tabindex="5" onkeyup="validateRange(5, 'character');"/>
				--><!--<label for="Field5">Must be between <var id="rangeMinMsg5">6</var> and <var id="rangeMaxMsg5">12</var> characters.&nbsp;&nbsp;&nbsp; <em class="currently">Currently Used: <var id="rangeUsedMsg5">0</var> characters.</em></label>
			--></div>
			<div><form:errors path="password" cssClass="error" /></div>
		</li>
		
		<li id="foli10" class="notranslate      ">
			<label class="desc" id="title10" for="Field10">
				<spring:message code="userReg.confirmPassword" />
			</label>
			<div>
				<input id="cpwd" name="cpassword" type="password" class="field text medium" value="" maxlength="12" onkeyup="" onblur="chkPass()" />
			</div>
			<div><form:errors path="cpassword" cssClass="error" /></div>
		</li>
		<li id="foli11" class="notranslate  notStacked">
			<fieldset>
				<![if !IE | (gte IE 8)]>
					<legend id="title11" class="desc">
						<spring:message code="userReg.regAs" />
						<span id="req_11" class="req">*</span>
					</legend>
				<![endif]>

				<div>
					<input id="radioDefault_11" name="Field11" type="hidden" value="" />
					<span>
						<form:radiobuttons  path="registerAs" cssClass="field radio regAs" items="${regAsList}" />
					</span>
				</div>
				<div><form:errors path="registerAs" cssClass="error" /></div>
			</fieldset>
		</li>
	<div id="companyDiv">
		<li id="foli128" class="notranslate">
			<label class="desc" id="title128" for="Field128">
				<spring:message code="userReg.designation" />
				
			</label>
			<div>
				<form:input path="contact.designation" cssClass="field select medium"/>
			</div>
			<div><form:errors path="contact.designation" cssClass="error" /></div>
		</li>
	
		<li id="foli129" class="notranslate">
			<label class="desc" id="title129" for="Field128">
				<spring:message code="userReg.cmpName" />
				
			</label>
			<div>
				<form:input path="contact.companyName" cssClass="field select medium"/>
			</div>
			<div><form:errors path="contact.companyName" cssClass="error" /></div>
		</li>
	</div>
		<li id="foli130" class="notranslate">
			<label class="desc" id="title130" for="Field130">
				<spring:message code="userReg.addr1" />
				<span id="req_11" class="req">*</span>
			</label>
			<div>
				<form:input path="contact.cmpaddress1" cssClass="field select medium"/>
				
			</div>
		</li>
		<li id="foli131" class="notranslate">
			<label class="desc" id="title131" for="Field131">
				<spring:message code="userReg.addr2" />
				
			</label>
			<div>
				<form:input path="contact.cmpaddress2" cssClass="field select medium"/>
			</div>
			<div><form:errors path="contact.cmpaddress2" cssClass="error" /></div>
		</li>
	
		<li id="foli118" class="notranslate">
			<label class="desc" id="title118" for="Field118">
				<spring:message code="userReg.state" />
				<span id="req_118" class="req">*</span>
			</label>
			<div>
				<form:select id="state" cssClass="field select medium"  path="contact.state" onchange="" >
					<form:option value="" label="--- Select ---"></form:option>
					<form:options  items="${states}" itemValue="id" itemLabel="name" />
				</form:select>
			</div>
			<div><form:errors path="contact.state" cssClass="error" /></div>
		</li>
		<li id="foli119" class="notranslate">
			<label class="desc" id="title119" for="Field119">
				<spring:message code="userReg.city" />
				<span id="req_119" class="req">*</span>
			</label>
			<div>
				<form:select id="city" cssClass="field select medium"  path="contact.city">
					
				</form:select>
			</div>
			<div><form:errors path="contact.city" cssClass="error" /></div>
		</li>
		<li id="foli121" class="notranslate">
			<label class="desc" id="title121" for="Field121">
				<spring:message code="userReg.zip" />
				<span id="req_121" class="req">*</span>
			</label>
			<div>
				<form:input id="zip" cssClass="field text medium" path="contact.zip" maxlength="6" onkeyup="validateRange(121, 'character');"/>
				<!--<label for="Field121">Must be between <var id="rangeMinMsg121">6</var> and <var id="rangeMaxMsg121">6</var> characters.&nbsp;&nbsp;&nbsp; <em class="currently">Currently Used: <var id="rangeUsedMsg121">0</var> characters.</em></label>
			--></div>
			<div><form:errors path="contact.zip" cssClass="error" /></div>
		</li>
		<li id="foli122" class="notranslate">
			<label class="desc" id="title122" for="Field122">
				<spring:message code="userReg.mobile" />
			</label>
			<div>
				<form:input id="Field122" path="contact.phoneMobile"  cssClass="field text medium numeric"  maxlength="10"/>
			</div>
			<div><form:errors path="contact.phoneMobile" cssClass="error" /></div>
		</li>
		<li id="foli123" class="notranslate">
			<label class="desc" id="title123" for="Field123">
				<spring:message code="userReg.landline" />
			</label>
			<div>
				<form:input id="Field123" path="contact.phoneLandline"  cssClass="field text medium numeric"  maxlength="10"/>
			</div>
			<div><form:errors path="contact.phoneLandline" cssClass="error" /></div>
		</li>
		<li id="foli124" class="notranslate">
			<label class="desc" id="title124" for="Field124">
				<spring:message code="userReg.email" />
				<span id="req_11" class="req">*</span>
			</label>
			<div>
				<form:input id="Field124" path="contact.emailId"  cssClass="field text medium" maxlength="30"/>
			</div>
			<div><form:errors path="contact.emailId" cssClass="error" /></div>
		</li>
		<li id="foli126" class="date notranslate      ">
			<label class="desc" id="title126" for="Field126">
				<spring:message code="userReg.dob"></spring:message>
				<span id="req_126" class="req">*</span>
			</label>
			<span>
				<form:input id="dob" path="dob"  cssClass="field text medium" cssStyle="width: 70% !important;" maxlength="30"/>
			</span>
			<div><form:errors path="dob" cssClass="error" /></div>
		</li>  
		<li class="date notranslate">
			<label class="desc">
				<spring:message code="userReg.anniDate"></spring:message>
			</label>
			<span>
				<form:input id="anni"  path="anniversary"  cssClass="field text medium" cssStyle="width: 70% !important;" maxlength="30"/>
			</span>
			<div><form:errors path="anniversary" cssClass="error" /></div>
		</li> 
		
		<li class="buttons ">
			<div>
				<input id="saveForm" name="saveForm" class="btTxt submit" type="submit" value="Submit"/>
			</div>
		</li>
	</ul>
</form:form> 

</div><!--container-->

</body>
</html>